<template>
  <view class="box exp">
    <view class="box-title">
      <text class="title">工作经历</text>
    </view>
    <view
      class="box-item"
      v-for="workItem in personWorkArr"
      :key="workItem.workId"
    >
      <view class="item-title">
        <text class="icon icon-company"></text>
        <text>{{ workItem.company }}</text>
        <text class="required" v-if="workItem.is_practice == '1'">实习</text>
      </view>
      <view class="exp-info">
        <view class="exp-info-left">
          <text>{{ workItem.jtzw }}</text>
          <text v-if="workItem.salarymonth"
            ><text class="divide">|</text>{{ workItem.salarymonth }}/月</text
          >
        </view>
        <view class="exp-info-right">
          <text>{{ workItem.date }}</text>
        </view>
      </view>
      <view class="des">
        <text>{{ workItem.workdesc || '' }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    personWorkArr: {
      type: Array,
      default: () => []
    }
  }
};
</script>

<style lang="scss" scoped>
$img-base-resume: $img-base + 'resume/';
.item-title {
  margin-bottom: $uni-spacing-col-lg;
  font-size: $uni-font-size-base;
  font-weight: bold;
  color: $uni-text-color-333;
}
.box {
  margin-bottom: $uni-spacing-col-big;
  padding: $uni-spacing-col-big;
  background-color: $uni-bg-color;
  border-radius: $uni-border-radius-lg;
  &-title {
    margin-bottom: $uni-spacing-col-lg;
    font-size: $uni-font-size-lg;
    font-weight: bold;
    color: #333333;
  }
  .icon {
    width: 36rpx;
    height: 36rpx;
    vertical-align: bottom;
  }
}
.required {
  margin-left: 16rpx;
  padding: 0rpx 2rpx;
  color: $uni-text-color-error;
  border: 1px solid $uni-border-color-red;
  border-radius: 8rpx;
  font-size: $uni-font-size-sm;
  line-height: $uni-font-size-nor;
}
.exp {
  &-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: $uni-spacing-col-lg;
    font-size: $uni-font-size-sm;
    &-left {
      color: $uni-text-color-333;
    }
    &-right {
      flex-shrink: 0;
      margin-left: 10rpx;
      color: $uni-text-color-999;
    }
  }
  .icon-company {
    background-image: url($img-base-resume + 'enterprise.png');
  }
}
</style>
